<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import { ElMessage } from 'element-plus'
import fileConverter from '@/components/file-ext.js'
import newWps from './new-wps.vue'
interface Props {
  wjlx: string // ()
  url: string
  isDisable?: boolean
}
// 入参
const props = defineProps<Props>()

const wpsRef = ref()
// // 初始化ofd
const initOfd = () => {
  let instance = null
  try {
    instance = fileConverter.createLocalOfdReader({
      parentNode: document.querySelector('#ofdReader'),
      wrapIframe: true,
      fileUrl: props.url,
    })
  } catch (error) {
    console.log(error, '报错信息')
    ElMessage.error('请检查是否正确安装OFD阅读器')
  }
  fileConverter.toggleComponent({
    instance: instance,
    name: 'd_sealsign',
    enable: false,
  })
}
const pdfUrl = ref('')
const init = () => {
  if (props.wjlx === 'ofd' && props.url) {
    nextTick(() => {
      initOfd()
    })
  } else if (props.wjlx === 'word' && props.url) {
    nextTick(() => {
      wpsRef.value!.openWps(props.url)
    })
  } else if (props.wjlx === 'pdf') {
    pdfUrl.value = encodeURIComponent(props.url)
  }
}
defineExpose({ init })
</script>
<template>
  <!-- 文书展示组件 -->
  <div class="container">
    <template v-if="wjlx === 'word'">
      <new-wps :url="url" :is-disable="isDisable" ref="wpsRef"></new-wps>
    </template>
    <template v-else-if="wjlx === 'pdf'">
      <!-- <PdfPreview :src="url"></PdfPreview> -->
      <iframe class="pdf" :src="'/pdfjs/web/viewer.html?file=' + pdfUrl" frameborder="0"></iframe>
    </template>
    <!-- ofd文件 -->
    <template v-else-if="wjlx === 'ofd'">
      <div id="ofdReader" style="height: 100%; width: 100%"></div>
    </template>
    <template v-else-if="wjlx === 'img'">
      <img class="img" :src="url" alt="" />
    </template>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  text-align: center;
  .pdf {
    width: 100%;
    height: 99%;
  }
  .img {
    height: 100%;
  }
}
</style>
